<template>
  <div class="menu-wrapper">
    <category-dialog ref="supplierCategoryDialog" request="supplierCategory" @confirm="dialogConfirm"/>
    <el-form ref="supplierForm" :model="form" :rules="rules" label-width="120px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="供应商名称" prop="name">
            <el-input v-model="form.name"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="所属分类">
              <el-input v-model="supplierCategoryName" suffix-icon="el-icon-arrow-down" @focus="dialogShow"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结算方式" prop="paymentPluginId">
            <el-select v-model="form.paymentPluginId" placeholder="请选择付款方式">
              <el-option v-for="item in optionsForm" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="负责人" prop="consignee">
            <el-input v-model="form.consignee"  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人电话" prop="mobile">
            <el-input v-model="form.mobile"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="所在地" prop="areaId">
        <el-col :span="8">
          <Distpicker @selected="onSelected" :province="district.province" :city="district.city" :area="district.area"></Distpicker>
        </el-col>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-col :span="9">
          <el-input v-model="form.address"/>
        </el-col>
      </el-form-item>


      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">收货地址</span>
      </div>

        <el-form-item label="开票类型" style="width:270px">
          <el-select style="width: 100%" v-model="form.taxType" placeholder="请选择类型">
            <el-option label="不开票" value="0"/>
            <el-option label="增票" value="1"/>
            <el-option label="普票" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="税率(%)" style="width:270px">
          <el-input v-model="form.tax"/>
        </el-form-item>


      <el-form-item label="联系电话" style="width:270px">
        <el-input v-model="form.phone" @blur="phoneNumber"/>
      </el-form-item>
      <el-form-item label="电子邮箱" style="width:270px">
        <el-input v-model="form.email" @blur="sendEmail"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="clicked" @click="updateSupplier('supplierForm')">
          完 成
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
  .menu-wrapper {
    margin: 15px;
  }
</style>
<script>
  import {EventBus} from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import Distpicker from '@/components/Distpicker/Distpicker'
  import {find,update,reset} from '@/api/supplier'
  import {checkUserExists} from '@/api/sysUser'
  import md5 from 'js-md5';
  import CategoryDialog from '@/components/CategoryDialog'
  export default {
    name: 'supplier-edit',
    filters: {},
    components: {
      Distpicker, CategoryDialog
    },
    data() {
      return {
        id:'',
        clicked: false, // 按钮防双击
        district: {province: 440000, city: '广州市', area: '海珠区'},
        form: {
          consignee:'',
          name: '',
          mobile: '',
          phone: '',
          email: '',
          areaId: 440000,
          areaName: '广东省广州市海珠区',
          address: '',
          supplierCategoryId: '',
          tax:'',
          taxType:'0',
          id:'',
          paymentPluginId:""
        },
        supplierCategoryName: '',
        rules: {
          name: [
            {required: true, message: '请输入商户名称', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          areaId: [
            {required: true, message: '请输入选择所在地', trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '请输入联系电话', trigger: 'blur'}
          ],
          address: [
            {required: true, message: '请输入详细地址', trigger: 'blur'}
          ],
        },
        optionsForm: [
        { name: '现金客户', value: 'cashPayPlugin' },
        { name: '月结客户', value: 'debtPayPlugin'},
        { name: '代销客户', value: 'salePayPlugin'},
      ],
      }
    },
    created() {
      this.getData()
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='supplier-edit' && newVal.query.id!=this.id) {
          this.getData()
        }
      }
    },
    methods: {
      getData () {
        this.id = this.$route.query.id
        var _this = this;
        find(_this.id).then(response => {

          if (response.type == 'success') {
            _this.form.id = response.data.id;
            _this.form.name = response.data.name;
            _this.form.mobile = response.data.mobile;
            _this.form.supplierCategoryId = response.data.supplierCategoryId;
            _this.form.phone = response.data.phone;
            _this.form.email = response.data.email;
            _this.form.tax = response.data.tax;
            _this.form.taxType = JSON.stringify(response.data.taxType);
            _this.form.areaName = response.data.areaName;
            _this.supplierCategoryName = response.data.supplierCategoryName;
            _this.form.areaId = response.data.areaId;
            _this.form.address = response.data.address;
            _this.form.consignee = response.data.consignee;
            _this.form.paymentPluginId = response.data.paymentPluginId;
            _this.district = utils.decodeArea(response.data.areaId);
          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
          }
        }).catch(error => {
        })
      },
      onSelected(val) {
        if (!utils.isNull(val.area) && !utils.isNull(val.area.code)) {
          this.form.areaId = val.area.code;
          this.form.areaName = val.area.value;
        }
      },
      dialogShow() {
        console.log('点击了')
        this.$refs.supplierCategoryDialog.show()
      },
      dialogConfirm(val) {
        this.supplierCategoryName = val.name;
        this.form.supplierCategoryId = val.id
      },
      updateSupplier(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            update(_this.form).then(response => {
              console.log(response)
              _this.clicked = false
              if (response.type == 'success') {
                EventBus.$emit('supplier-edit', response.data)
                _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
                  _this.$router.push({
                    path: '/supplier/list'
                  })
                })// 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                })
              }
            }).catch(error => {
              _this.clicked = false
            })
          } else {
            return false
          }
        })
      },
      sendEmail: function() {
        var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (this.form.email != '' && !regEmail.test(this.form.email)) {
          this.$message({
            message: '邮箱格式不正确',
            type: 'error'
          })
          this.form.email = ''
        }
      },
      phoneNumber() {
        if (this.form.phone && (!(/^[1][34578]\d{9}$/).test(this.form.phone) || !(/^[1-9]\d*$/).test(this.form.phone) || this.form.phone.length !== 11)) {
          this.$message({
            message: '手机格式不正确',
            type: 'error'
          })
          this.form.phone = ''
        }
      },
    }
  }
</script>
